import React, { useState, useEffect } from 'react';
import { Input, Button, Form, Tree, Select } from 'antd';
const { Option } = Select;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function shopFrom(props) {
  console.log(props.updataData);
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [form] = Form.useForm();
  console.log(checkedKeys);
  useEffect(() => {
    form.setFieldsValue({
      name: props.updataData.title,
      status: props.updataData.status == '启用' ? 1 : 2,
    });
  }, []);
  const onFinish = (value) => {
    value.pid = checkedKeys.checked[0];
    value.id = props.updataData.id;
    props.updata(value);
  };
  const onExpand = (expandedKeysValue) => {
    console.log('onExpand', expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };
  const onCheck = (checkedKeysValue) => {
    setCheckedKeys(checkedKeysValue);
  };
  const onReset = () => {
    form.resetFields();
  };
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="name"
        placeholder="你好"
        label="商品类型名称"
        rules={[{ required: true }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="status"
        label="商品类型状态"
        rules={[{ required: true }]}
      >
        <Select placeholder="请选择商品状态" allowClear>
          <Option value={1}>启用</Option>
          <Option value={2}>禁用</Option>
        </Select>
      </Form.Item>
      <Form.Item label="上级商品类型">
        <Tree
          checkable
          onExpand={onExpand}
          onCheck={onCheck}
          defaultSelectedKeys={props.updataData.title}
          checkedKeys={checkedKeys}
          checkStrictly
          treeData={props.showData.children}
          style={{ marginTop: '10px' }}
        />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>
  );
}
